<template>
  <a-modal
    class="preview-modal"
    :visible="imgVisible"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :footer="null"
    @cancel="closeModal(false)"
    width="450px"
  >
    <div
      v-for="(l, i) in personalPic"
      :key="i"
      class="picBox"
      :style="{ background: `url(${l}) no-repeat 50% 50% /contain` }"
      @click="preview(i)"
    >
      <!-- <img :src="l" alt="" /> -->
    </div>
    <preview-img
      :imgList="personalPic"
      :imgIndex="imgIndex"
      ref="previewImg"
    ></preview-img>
  </a-modal>
</template>
<script>
import previewImg from "./previewImg.vue";
export default {
  name: "preview",
  components: { previewImg },
  props: {
    imgVisible: {
      // 是否显示弹窗
      type: Boolean,
      default: false,
    },
    personalPic: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      imgIndex: 0,
    };
  },
  watch: {
    imgVisible(y) {
      if (y) {
      } else {
      }
    },
  },
  methods: {
    closeModal(bool) {
      this.$emit("cancel", bool);
    },
    //大图预览
    preview(index) {
      this.imgIndex = index;
      this.$refs.previewImg.visible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.picBox {
  width: 100%;
  height: 255px;
  img {
    width: 100%;
    height: 100%;
  }
}
.picBox + .picBox {
  margin-top: 40px;
}
</style>